<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Draw graph by force-directed placement</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./prototype.js"></script>
  <script src="./jsgraph2.js"></script>
  <style type="text/css">
    span.label { position: absolute; border: 1px solid black; }
  </style>
</head>
<body>
  <canvas id="canvas" width=640 height=640></canvas><br/>
  <button onclick="start_timer()">start</button>
  <button onclick="stop_timer()">stop</button><br/>
  <div id="msg"></div>
  <img id="letter0" src="./letter0.gif" width=160/>
  <img id="letter1" src="./letter1.gif" width=160/>
  <img id="letter2" src="./letter2.gif" width=160/>
  <img id="letter3" src="./letter3.gif" width=160/>
  <img id="letter4" src="./letter4.gif" width=160/>
  <img id="letter5" src="./letter5.gif" width=160/>
  <img id="letter6" src="./letter6.gif" width=160/>
  <img id="letter7" src="./letter7.gif" width=160/>
  <img id="letter8" src="./letter8.gif" width=160/>
  <img id="letter9" src="./letter9.gif" width=160/>
  <img id="letter10" src="./letter10.gif" width=160/>
  <img id="letter11" src="./letter11.gif" width=160/>
  <img id="letter12" src="./letter12.gif" width=160/>
  <img id="letter13" src="./letter13.gif" width=160/>
  <img id="letter14" src="./letter14.gif" width=160/>
  <img id="letter15" src="./letter15.gif" width=160/>
  <img id="letter16" src="./letter16.gif" width=160/>
  <img id="letter17" src="./letter17.gif" width=160/>
  <img id="letter18" src="./letter18.gif" width=160/>
  <img id="letter19" src="./letter19.gif" width=160/>
  <img id="letter20" src="./letter20.gif" width=160/><br/>
  <img id="gemma" src="./gemma.jpg" width=64/>
</body>
</html>
